<template>
    <div class="exception-content">
        <img
                src="../../assets/images/error/empty.png"
                class="imgException"
                alt="empty"
        />
        <div>
            <h3  class="title">
                页面暂无内容
            </h3>
            <p class="description">
                抱歉，页面暂无内容，请看看其他页面
            </p>
            <back-btn-group class="back-btn-group"></back-btn-group>
        </div>
    </div>
</template>

<script>
import backBtnGroup from './back-btn-group.vue';
export default {
    name: 'Page404',
    components: {
        backBtnGroup
    }
};
</script>

<style scoped lang="scss">
    @media screen and (max-width: 720px) {
        .exception-content {
            min-height: 200px;

            .imgException {
                max-width: 100px;
                margin-right: 10px;
            }

            .title {
                font-size: 14px;
                margin: 10px 0;
            }

            .description {
                font-size: 12px;
            }
        }
    }

    @media screen and (min-width: 721px) and (max-width: 1199px) {
        .exception-content {
            min-height: 300px;

            .imgException {
                max-width: 180px;
                margin-right: 30px;
            }

            .title {
                font-size: 20px;
                margin: 10px 0;
            }

            .description {
                font-size: 14px;
            }
        }
    }

    @media screen and (min-width: 1200px) {
        .exception-content {
            min-height: 500px;

            .imgException {
                max-width: 260px;
                margin-right: 50px;
            }

            .title {
                font-size: 24px;
                margin: 20px 0;
            }

            .description {
                font-size: 16px;
            }
        }
    }

    .exception-content {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        .title {
            color: #333;
        }

        .description {
            color: #666;
        }
    }
</style>
